<template>
  <!-- 商品类型详情 -->
  <view class="page">
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBackgroundColor="false"
    ></nav-bar>
    <view class="type-convert" v-if="options.mark === '2'">
      <view
        class="info"
        v-for="(el, index) in arrList"
        @click="clickEvent(el.name)"
        :key="index"
        :class="el.active ? 'info-active' : ''"
      >
        <view class="txt">
          {{ el.name }}
        </view>
      </view>
    </view>
    <view class="productSort">
      <comprehensive
        :tyepId="items.id"
        ref="comprehensive"
        :mark="options.mark"
      ></comprehensive>
      <view class="footer"> </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import navBar from "@/components/navBar";
import comprehensive from "@/components/comprehensive";
import { getCategoryList } from "@/api/product.js";

export default {
  data() {
    return {
      navH: "",
      title: "产品中心",
      backgroundColor: "#fff",
      items: {}, // 参数过来的字段
      options: {},
      arrList: [], // 类型列表
    };
  },
  computed: mapGetters(["globalData"]),
  components: {
    comprehensive,
    navBar,
  },
  onLoad(options) {
    this.title = options?.name ? options.name : this.title;
    this.navH = this.globalData.navHeight;
    this.items = options.mark === "1" ? options : {};
    this.options = options;
    if (this.options.mark === "2") {
      this.getAllCategory();
    }
    // #ifdef APP-PLUS
    setTimeout(() => {
      uni.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#ffffff",
      });
    }, 300);
    // #endif
    uni.setNavigationBarTitle({
      title: this.title,
    });
  },
  created() {
    // #ifdef h5
    // #endif
  },
  mounted() {},
  onReachBottom() {
    // 触底加载更多
    this.$refs.comprehensive.loadData();
  },
  mounted() {},
  methods: {
    // 加载数据
    getAllCategory() {
      let that = this;
      let data = {
        name: this.options.name,
      };
      getCategoryList(data).then((res) => {
        that.arrList = res.data[0].childList;
        that.arrList.forEach((item) => {
          this.$set(item, "active", false);
        });
        that.arrList[0].active = true;
        this.items = that.arrList[0];
        this.$refs.comprehensive.productList(this.items.id);
      });
    },
    clickEvent(name) {
      // 点击切换状态
      this.arrList.forEach((item) => {
        if (item.name === name) {
          item.active = true;
          this.items = item;
          this.$refs.comprehensive.productList(this.items.id);
        } else {
          item.active = false;
        }
      });
    },
    goBlck() {
      uni.navigateBack({
        delta: 1, // 返回上两层页面
      });
    },
  },
};
</script>

<style scoped lang="scss">
.type-convert {
  padding: 0rpx 26rpx;
  margin-top: 26rpx;
  overflow-x: auto; /* 横向滚动条 */
  white-space: nowrap; /* 防止内容换行 */
  .info {
    display: inline-block;
    height: 64.53rpx;
    width: 191.86rpx;
    border-radius: 12rpx;
    margin-left: 20rpx;
    background: #fff;
    text-align: center;
    line-height: 64.53rpx;
    color: #8f8f91;
    font-size: 27.91rpx;
    &:nth-child(1) {
      margin-left: 0rpx;
    }
  }
  .info-active {
    background: #f5d5d4;
    border-radius: 12rpx;
    border: 2rpx solid #eb3f3a;
    color: #eb3f3a;
  }
}
</style>
